<template>
	<div>
		<div class="layout-breadcrumb">
			<Breadcrumb>
			    <BreadcrumbItem to="/">首页</BreadcrumbItem>
			    <BreadcrumbItem href="">管理</BreadcrumbItem>
			    <BreadcrumbItem to="/wechat/manager/material?type=mpnews">素材管理[图文消息]</BreadcrumbItem>
			    <BreadcrumbItem href="">更新</BreadcrumbItem>
			</Breadcrumb>
		</div>
		<div class="layout-content">
		    <div class="layout-content-main">
		    	<Row :gutter="16" type="flex">
		    		<ICol span="4" style="width:210px;">
		    			<LeftView v-for="(news, index) in mpnews" :key="index" :form="news" :choise="choiseNews" :up="up" :down="down" :del="del" ></LeftView>
		    			<a href="javascript:void(0)"><div class="plus" v-on:click="plusNews"><Icon type="md-add"></Icon></div></a>
		    		</ICol>
		    		<ICol span="14">
                        <IForm>
		    			<RightForm v-for="(news, index) in mpnews" :key="index" :form="news" v-show="news.show"></RightForm>
                        </IForm>
		    		</ICol>
                    <ICol span="4" class="rightControl">
                        <Button long @click="save" :loading="loading">保存</Button>
                    </ICol>
		    	</Row>
		    </div>
		</div>
	</div>
	
</template>
<style>
	.plus{border: 1px dashed #e9eaec;height: 100px;text-align: center;font-size: 40px; line-height: 100px;}
    .rightControl button{margin-top: 15px;}
    .rightControl .preview{background: #5cadff}
</style>
<script>
	import {Row,Col,Breadcrumb,Icon,Button,Form} from 'view-design';

    import Schem from 'async-validator';

    import RightForm from 'admin/components/wechat/manager/material/mpnews/right-form';
    import LeftView from 'admin/components/wechat/manager/material/mpnews/left-view';

	export default{
		components:{
			Row,
            'ICol':Col,
			Breadcrumb,
            "BreadcrumbItem" : Breadcrumb.Item,
			Icon,
			RightForm,
			LeftView,
            Button,
            'IForm' : Form,
            'FormItem' : Form.Item,
        },
        data () {
            return {
            	index : -1,//图文列表下标
            	choiseIndex : -1,//选择的下标
            	mpnews : [],
                mpnews_id : 0,
                loading : false,
            }
        },
        methods:{
            save(){
                this.loading = true;
                if(this.mpnews.length==0){
                    this.$Message.error('至少添加一条图文');
                    this.loading = false;
                    return false;
                }
                var descriptor = {
                    title : {type : "string" , required : true , message : '请填写图文标题'},
                    pic : {type : "string" , required : true , message : '请上传封面'},
                    link : [
                        {type : "string",required : true , message : '请填写链接地址'},
                        {type : "url" , message : '请填写合法的链接地址,http开头'}
                    ]
                }
                var validator = new Schem(descriptor);
                for(var i in this.mpnews){
                    var isValidate = false;
                    validator.validate(this.mpnews[i], (errors, fields) => {
                        if(errors) {
                            this.choiseNews(i);
                            this.$Message.error(errors[0]['message']);
                            this.loading = false;
                            isValidate = true;
                        }
                    });
                    if(isValidate){
                        return false;
                    }
                }

                this.Axios.Wechat.Manager.Material.Mpnews.Update({mpnews:this.mpnews,mpnews_id:this.mpnews_id})
                .then(res=>{
                    if(!res) return false;
                    this.$router.go(-1);
                })
            },
        	//选择一个图文
        	choiseNews(index){
        		this.resetListCurrent();
        		this.newsFormHide();
        		this.newsFormShow(index);
        		this.mpnews[index].current = 'current';
        		this.choiseIndex = index;
        	},
        	//需要上调的news
        	up(index){
        		var news = this.mpnews[index];
        		var upIndex = parseInt(index)-1;
        		this.mpnews[index] = this.mpnews[upIndex];
        		this.mpnews[upIndex] = news;
        		this.resetListIndex();
        		this.choiseNews(upIndex);

        	},
        	//需要下调的news
        	down(index){
        		var news = this.mpnews[index];
        		var downIndex = parseInt(index)+1;
        		this.mpnews[index] = this.mpnews[downIndex];
        		this.mpnews[downIndex] = news;
        		this.resetListIndex();
        		this.choiseNews(downIndex);
        	},
        	//删除news
        	del(index){
                var news_id = this.mpnews[index].id;
                if(news_id>0){
                    this.$Modal.confirm({
                        title: '删除确定',
                        content : '你确定要删除吗？删除后无法恢复',
                        loading: true,
                        onOk: () => {
                            this.Axios.Wechat.Manager.Material.Mpnews.DelNews({news_id:news_id,mpnews_id:this.mpnews_id})
                            .then(res =>{
                                if(!res) return false;
                                this.deleteNews(index);
                                this.$Modal.remove();
                            })
                        }
                    });
                }else{
                    this.deleteNews(index);
                }
        	},
            //删除单个图文
            deleteNews(index){
                this.mpnews.splice(index,1);
                this.resetListIndex();
                if(index==this.choiseIndex){
                    this.choiseNews(index-1);
                }else{
                    this.choiseNews(0);                 
                }
            },
        	//新增图文
        	plusNews(){
                var plus = parseInt(this.index)+1;
                if(plus>7){
                    this.$Message.error('最多8条图文');return false;
                }

        		this.index = plus;
        		this.mpnews.push({
        			index: this.index,
                    length : 0,
                    id : '',
                    title: '',
                    link : '',
                    desc : '',
                    pic : '',
                    originPic : '',
                    show: false,
                    current: '',
                    fixedNumber : this.index==0 ? [9,5] : [1,1],
                    picshow :{
                        width : this.index==0 ? '188px' : '120px',
                        height : '120px',
                    }
        		})
        		this.choiseIndex = this.index;
        		this.newsFormHide();
        		this.newsFormShow(this.index);
        		this.resetListCurrent();
        		this.updateFormLength();
        		this.mpnews[this.choiseIndex].current = 'current';
        		
        	},
        	//重置列表选中
        	resetListCurrent(){
        		for(var i in this.mpnews){
        			this.mpnews[i].current = '';
        		}
        	},
        	//更新news序号
        	resetListIndex(){
        		for(var i in this.mpnews){
        			this.mpnews[i].index = i;
        		}
        		this.index = this.mpnews.length-1;
        	},
        	//更新news个数
        	updateFormLength(){
        		for(var i in this.mpnews){
        			this.mpnews[i].length = this.mpnews.length;
        		}
        	},
        	//所有图文表单隐藏
        	newsFormHide(){
        		for(var i in this.mpnews){
        			this.mpnews[i].show = false;
        		}
        	},
        	//图文表单显示
        	newsFormShow(index){
        		this.mpnews[index].show = true;
        	}
        },
        created:function(){
            if(this.$route.params.id==undefined) return false;
            var id = this.$route.params.id;
            this.mpnews_id = id;
            this.Axios.Wechat.Manager.Material.Mpnews.Get(id)
                .then(res =>{
                    if(!res) return false;
                    var mpnews = res.data;
                    for(var i in mpnews){
                        this.mpnews.push({
                            index: i,
                            length : mpnews.length,
                            id : mpnews[i].id,
                            title: mpnews[i].title,
                            desc : mpnews[i].desc,
                            link : mpnews[i].link,
                            pic : mpnews[i].pic,
                            originPic : mpnews[i].originPic,
                            show: false,
                            current: '',
                            fixedNumber : i==0 ? [9,5] : [1,1],
                            picshow :{
                                width : i==0 ? '188px' : '120px',
                                height : '120px',
                            }
                        })
                    }
                    this.index = this.mpnews.length-1;
                    this.choiseNews(0);
                })
        }

	}
</script>